<template>
  <div class="g-content-map">
    <village-alarm :mapList="deviceList"></village-alarm>
    <div class="public-part-wrap" flex="dir:top box:first">
      <community class="community-select" @onCommunityChange="onChangeDeptId"></community>
      <device-list class="mt-10" :list="deviceList"></device-list>
      <!--<div flex="dir:top box:first">-->
      <!--<device-state class="g-bkColor3"></device-state>-->
      <!--</div>-->
    </div>
  </div>
</template>
<script>
import villageAlarm from '../../components/common/event/villageAlarm.vue'
import community from '../../components/common/select/community.vue'
import deviceState from '../../components/device/deviceStateB'
import deviceList from '../../components/device/deviceList.vue'

export default {
  name: 'index',
  components: {
    'village-alarm': villageAlarm,
    'community': community,
    'device-state': deviceState,
    'device-list': deviceList
  },
  data () {
    return {
      deviceList: [] // 设备列表
    }
  },
  mounted: function () {},
  methods: {
    // 根据小区deptId获取设备列表
    getDeviceList: function (deptId) {
      let url = this.$base.getUrl('getList')
      let params = {
        url: url,
        data: {
          deptId: deptId,
          page: 1,
          limit: 999
        }
      }

      this.$store.dispatch('getForm', params).then((res) => {
        let { list } = res
        list.map(item => {
          // 给设备列表添加一个 伪事件ID，实现
          item.eventSysId = item.equipmentId
          item.popType = 'equipment'
          item.bgColor = '#50e3c2'
          // 设备状态为1 表示
          if (item.equipmentState === 1) {

          }
        })
        this.deviceList = list
      })
    }, // 小区列表选择回调
    onChangeDeptId: function (value) {
      const { deptId } = value
      if (deptId) this.getDeviceList(deptId)
    }
  }
}
</script>
<style lang="less" scope>
  .g-content-map {
    position: fixed;
    top: 50px;
    right: 0;
    bottom: 0;
    left: 180px;
  }

  .public-part-wrap {
    position: fixed;
    right: 10px;
    bottom: 10px;
    top: 60px;
    width: 460px;
  }

  .community-select {
    width: 100%;
  }

  .skin-white {
    .g-bkColor3 {
      background-color: rgba(255, 255, 255, .9) !important;
      box-shadow: rgba(0, 0, 0, .1) 0 3px 12px;
      /deep/ .top-total span {
        color: #4C6072 !important;
      }
      /deep/ .TL .white {
        color: #4C6072 !important;
      }
      /deep/ .device-table table th {
        background: rgba(0, 0, 0, 0.1);
      }
      /deep/ .el-switch.is-checked .el-switch__core {
        background-color: rgb(221, 255, 248) !important;
      }
      /deep/ .el-switch .el-switch__core {
        background-color: rgba(0, 0, 0, 0.1) !important;
      }
      .alarm-trend {
        background: rgba(255, 255, 255, 1);
      }
    }
  }
</style>
